<template>
  <div id="all">
    <div class="myDiv">
      <el-dropdown trigger="click" style="float: right">
        <span class="el-dropdown-link">
          <el-button type="danger"
            ><i
              class="el-icon-s-custom"
              style="margin-right: 5px"
            />我的</el-button
          >
        </span>
        <el-dropdown-menu slot="dropdown" style="width: 120px">
          <el-dropdown-item class="clearfix"
            ><a @click="myArticleListFlag = true">我的帖子</a></el-dropdown-item
          >
          <el-dropdown-item class="clearfix">
            站内信
            <el-badge class="mark" :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <br style="clear: both" />
    </div>
    <div class="carousel" style="margin-top: 15px">
      <el-carousel ref="carousel" height="400px" @click.native="linkTo">
        <el-carousel-item v-for="item in boardArticles" :key="item">
          <h3
            style="position: absolute; z-index: 2; padding-left: 15px"
            class="small"
          >
            {{ item.title }}
          </h3>
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            :src="item.url"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="handupDiv">
      <span class="btnSpan">
        <el-button class="handupBtn" type="danger" @click="toNewArticle">
          发帖 <i class="el-icon-document" />
        </el-button>
        <el-button class="handupBtn" type="danger" @click="toCheckArticle">
          审核 <i class="el-icon-s-check" />
        </el-button>
      </span>
    </div>
    <div class="dividerDiv">
      <el-divider />
    </div>
    <div>
      <el-row :gutter="100">
        <el-col :span="12">
          <div>
            <h2 class="columnTitle">
              <strong>社区党建</strong>
              <span class="more"><a @click="toCommunityNews">更多</a></span>
              <br style="clear: both" />
            </h2>
          </div>
          <ul>
            <li v-for="item in communityArticles" :key="item">
              <a @click="toArticle">{{ item.title }}</a>
              <span style="float: right">[{{ item.time }}]</span>
            </li>
          </ul>
        </el-col>
        <el-col :span="12">
          <div>
            <h2 class="columnTitle">
              <strong>党建要闻</strong
              ><span class="more"><a @click="toPartyNews">更多</a></span>
              <br style="clear: both" />
            </h2>
          </div>
          <ul>
            <li v-for="item in communityArticles" :key="item">
              <a @click="toArticle">{{ item.title }}</a>
              <span style="float: right">[{{ item.time }}]</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      class="myArticleList"
      title="我的帖子"
      :visible.sync="myArticleListFlag"
      center
    >
      <el-table
        :data="myArticleList"
        border
        highlight-current-row
        style="display=flex"
      >
        <el-table-column align="center" label="提交时间" width="120px">
          <template slot-scope="{ row }">
            <span>{{ row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="文章标题">
          <template slot-scope="{ row }">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          width="110px"
          style="display=flex"
        >
          <template slot-scope="{ row }">
            <el-popover placement="bottom" trigger="hover" popover>
              <el-steps :active="row.checkStatusId" align-center>
                <el-step title="提交" icon="el-icon-edit" />
                <el-step title="审核" icon="el-icon-coordinate" />
                <el-step title="发表" icon="el-icon-success" />
              </el-steps>
              <el-tag slot="reference" effect="dark" :type="row.type">
                {{ row.status }}
              </el-tag>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="myArticleListFlag = false">取 消</el-button>
        <el-button type="primary" @click="myArticleListFlag = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myArticleListFlag: false,
      boardArticles: [
        {
          title: "“绿水青山就是金山银山”：绘出美丽中国新画卷",
          url: require("../../assets/party_pics/f44d305ea0a221f15a730a.jpg"),
          link: "/articleDetail/1",
        },
        {
          title: "吹响全面深化改革号角",
          url: require("../../assets/party_pics/f44d305ea08b21e840a413.jpg"),
          link: "/articleDetail/1",
        },
        {
          title: "“绿水青山就是金山银山”：绘出美丽中国新画卷",
          url: require("../../assets/party_pics/f44d305ea0a221f15a730a.jpg"),
          link: "/articleDetail/1",
        },
      ],
      communityArticles: [
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
        },
        {
          title: "中宣部授予东深供水工程建设者群体时代楷模",
          time: "2021-05-05",
        },
        {
          title: "为时代楷模画像 激发内生动力",
          time: "2021-05-05",
        },
        {
          title: "张玉滚：一根扁担挑起山里娃的“上学梦”",
          time: "2021-05-05",
        },
        {
          title: "用全部的生命教书育人",
          time: "2021-05-05",
        },
      ],
      articleStatus: [
        {
          type: "success",
          status: "已发表",
        },
        {
          type: "",
          status: "审核中",
        },
        {
          type: "danger",
          status: "审核未通过",
        },
      ],
      myArticleList: [
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
          checkStatusId: 3,
          type: "success",
          status: "已发表",
        },
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
          checkStatusId: 1,
          type: "",
          status: "审核中",
        },
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
          checkStatusId: 2,
          type: "danger",
          status: "审核未通过",
        },
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
          checkStatusId: 3,
          type: "success",
          status: "已发表",
        },
        {
          title: "信仰之光照亮壮阔征程——解码百年来中国共产党坚如磐石的理想信念",
          time: "2021-04-30",
          checkStatusId: 3,
          type: "success",
          status: "已发表",
        },
      ],
    };
  },
  methods: {
    linkTo() {
      const activeIndex = this.$refs.carousel.activeIndex;
      this.$router.push(this.boardArticles[activeIndex].link);
    },
    toArticle() {
      this.$router.push({
        path: "partyArticleDetail",
      });
    },
    toCheckArticle() {
      this.$router.push({
        path: "partyCheck",
      });
    },
    toNewArticle() {
      this.$router.push({
        path: "newpartyarticle",
      });
    },
    toCommunityNews() {
      this.$router.push({
        path: "communityNewsList",
      });
    },
    toPartyNews() {
      this.$router.push({
        path: "partyNewsList",
      });
    },
  },
};
</script>
<style scoped>
#all {
  width: 1400px;
  margin: 45px auto;
}
.clearfix {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.handupDiv {
  height: 30px;
  margin: 15px auto;
}
.btnSpan {
  float: left;
}
.pageSpan {
  float: right;
}
.columnTitle {
  margin: 20px 0;
  border-bottom: 3px solid #f0f0f0;
  width: 100%;
  height: 33px;
}
.columnTitle strong {
  float: left;
  height: 33px;
  padding: 0 10px;
  font-size: 18px;
  overflow: hidden;
  color: #bc272c;
  border-bottom: 3px solid #bc272c;
}
.more {
  float: right;
  font-size: 14px;
  font-weight: normal;
  padding-right: 16px;
  transform: translate(0, 40%);
  color: #a8afbb;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding: 0 1em;
}
li {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 32px;
  height: 32px;
  overflow: hidden;
}
li a:hover {
  color: #ff0000;
}
</style>
